<template>
	<view class="box">
		<view class="tabs flex flai">
			<view :class="[b==index?'active':'']" v-for="(item,index) in infoList" @click="ruleTab(item.id,index)">
				{{item.name}}
			</view>
			
		</view>
		<view class="content">
		   <view  v-html="content"></view>
			<!-- <rich-text :nodes="content"></rich-text> -->
		</view>
		<view style="margin-bottom: 30rpx;">
			
		</view>
	</view>
</template>

<script>
	import api from '../../api/index.js'
	export default {
		data() {
			return {
				content:'',
				infoList:[],
				b:0
				}
		},
		onLoad(options) {

			this.infoList= []
			//this.b = options.planId
			
			this.getRule(options.planId,options.id,options.index)
		},
		onShow(){
			this.infoList= []
		},
		methods: {
			// 获取协议列表
			getRule (planId,id,index) {
				api.cms.lookPlanRule({id:planId,isNew:1,displayPoint:'P1'}).then(res=>{
					if (res.code ==1) {
						if (res.data.length>0) {
							
						
						this.infoList = res.data[0].list
						if (id){
							this.getDetail(id)
						} else {
							this.getDetail(res.data[0].list[0].id)
						}
						
						this.b = index
						}
					}
				})
			},
			// 协议选项卡切换
			ruleTab(id,index) {
				this.b = index
				this.getDetail (id)
			},
			// 获取协议内容
			getDetail (id) {
				api.joinHellp.getRuleDetail({id:id}).then(res=>{
					if (res.code == 1) {
						uni.setNavigationBarTitle({
						    title: res.data.name
						});
						this.content = res.data.content
					}
				})
			}
		}
	}
</script>

<style>
@import "../../static/css/common.css";
@import url("./protocol.css");
</style>
